<template>
  <div class="width1200 margin-center mgt-20">
    <div class="breadcrumb flex-center">
      <p class="title">名师堂/名师详情</p>
    </div>
    <div class="flex-start">
      <el-image class="avter mgr-20" :src="list.img" fit="cover"></el-image>
      <div class="flex1">
        <p class="f16 bold mgb-10">{{list.name}} <img src="" /></p>
        <p class="tl">
          <i class="tag" v-if="list.tag!=''" :key='tagIndex' v-for='(tag,tagIndex) in list.tag.split(",")'>{{tag}}</i>
        </p>
        <p class="mgb-5">学段：{{list.studying}}</p>
        <p class="mgb-10">机构：{{list.organisation}}</p>
        <div class="mgb-40 flex-center">
          <div v-if="list.sign" class="btn focus">关注</div>
          <div v-if="!list.sign" class="btn ">已关注</div>
        </div>
        <div>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="介绍" name="first">介绍</el-tab-pane>
            <el-tab-pane label="课程" name="second">
              <div class="flex" style="flex-wrap: wrap;">
                <div class="flex mgb-20 relative item" v-for='(i,index) in tableDate' :key='index'>
                  <el-image class="cover" :src="i.img" fit="cover"></el-image>
                  <i class="type">{{i.type}}</i>
                  <i class="read">{{i.num}}人在看</i>
                  <div class="pdl-20 pdr-20 pdt-9 pdb-9 flex1 flex-between flex-column">
                    <div>
                      <p class="line1 bold mgb-5">{{i.title}}</p>
                      <div class="flex" style="flex-wrap: wrap;">
                        <i class="tag mgb-5" v-if="i.tag!=''" :key='tagIndex' v-for='(tag,tagIndex) in i.tag.split(",")'>{{tag}}</i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  name: "teacherDon",
  data() {
    return {
      activeName: 'second',
      list: {
        img: require('../assets/img/index/img-2.png'),
        name: "李焦",
        sex: "女",
        organisation: "成都市泡桐树小学",
        studying: '小学一年级',
        tag: "名师认证,红色教育授课金奖,成都市优秀班主任",
        date: "2021-03-10",
        sign: false,
      },
      tableDate: [
        {
          img: require('../assets/img/图层 12@2x.png'),
          title: '开心心上学去(基础版)',
          tag: '基础班,—年级上册,第一单元',
          teacher: '李晓东',
          num: '275',
          type: '道德与法治',
          state: false,
        },
        {
          img: require('../assets/img/图层 13@2x.png'),
          title: '开心心上学去(基础版)',
          tag: '基础班,—年级上册,第一单元',
          teacher: '李晓东',
          type: '主题教育',
          num: '999',
          state: true,
        },
        {
          img: require('../assets/img/图层 14@2x.png'),
          title: '开心心上学去(基础版)',
          tag: '基础班,—年级上册,第一单元',
          teacher: '李晓东',
          type: '成长与信仰',
          num: '66',
          state: true,
        }
      ],
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>
<style lang="less" scoped>
@import "../assets/css/variable.less";
.btn {
  background-color: #cb3e3e;
  opacity: 0.5;
  border-radius: 4px;
  width: 220px;
  text-align: center;
  font-size: 12px;
  color: #fff;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 34px;
  height: 34px;
  display: inline-block;
  &.focus {
    opacity: 1;
  }
}
.avter {
  width: 100px;
  height: 100px;
}
.item {
  width: 50%;
  .cover {
    width: 150px;
    height: 100px;
    border-radius: 6px;
    overflow: hidden;
  }
  .type {
    position: absolute;
    height: 20px;
    line-height: 20px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #1e1e1e6e;
    color: #fff;
    top: 10%;
    left: 0;
    padding: 0 5px;
    font-size: 12px;
    box-sizing: border-box;
  }
  .linkUrl {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: #333;
    text-align: center;
  }
  .read {
    position: absolute;
    width: 150px;
    height: 20px;
    line-height: 20px;
    box-shadow: inset 9px -12px 10px 0px rgba(0, 0, 0, 0.3);
    color: #fff;
    top: 80px;
    left: 0;
    padding: 0 5px;
    font-size: 12px;
    box-sizing: border-box;
    text-align: right;
    border-radius: 6px;
  }
  .item {
    width: 50%;
  }
}
</style>